<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>size</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id="canvas1" width="600" height="300"></canvas>
<canvas id="canvas2" style="width: 600px; height: 300px;"></canvas>
<script>
    const canvas1 = document.getElementById('canvas1');
    const ctx1 = canvas1.getContext('2d');
    const canvas2 = document.getElementById('canvas2');
    const ctx2 = canvas2.getContext('2d');
    function paint(ctx) {
        ctx.save();
        ctx.fillStyle = '#999';
        ctx.arc(50, 50, 50, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }
    paint(ctx1);
    paint(ctx2);
</script>
</body>
</html>